<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/base.css" />
  <link rel="stylesheet" href="./css/dianxin .css" />
  <link rel="stylesheet" href="./iconfont/iconfont.css" />
  <link rel="stylesheet" href="css/swiper.css" />
  <link rel="stylesheet" href="./css/snaxing.css">
</head>

<body>
  <header>
    <a href="javaScript:;">
      <span class="back">
        < </span>
    </a>
    <p>商品详情页</p>
  </header>
  <div class="box">
    <div class="swiper">
      <div class="swiper-wrapper">
      </div>
      <div class="swiper-pagination"></div>
      <!--分页器。如果放置在swiper外面，需要自定义样式。-->
    </div>
    <div class="nav">
      <div class="lpl">
        <div class="lol">
          <span class="lp">￥</span>
          <span class="lpm">88.00</span>
          <del><span class="lo">￥108.00</span></del>
        </div>
        <div class="sun">
          <span>已售9891件</span>
        </div>
      </div>
      <div class="son">
        <span>新茶日照充足 高山绿茶云雾茶绿茶炒青茶毛尖茶浓香型茶叶散装500g</span>
      </div>
    </div>
    <div class="text">
      <div class="sum">
        <p><i class="iconfont icon-duigou"></i>七天无理由退货</p>
        <p><i class="iconfont icon-duigou"></i>48小时发货</p>
      </div>
      <div class="som"><span>></span></div>
    </div>
    <div class="zfh">
      <div class="zheng">
        <div class="fei">
          <p>商品评价(5条)</p>
        </div>
        <div class="hong">
          <span>查看更多</span>
          <span>></span>
        </div>
      </div>
      <div class="zzy">
        <div class="zuo">
          <div class="yan">
            <img src="./imgs/10127.png" alt="" />
            <span>谷神不死</span>
          </div>
          <div class="zo">
            <span>质量很不错 挺喜欢的</span>
          </div>
          <div class="xl">
            <span>2023-03-21 15:01:35</span>
          </div>
        </div>
      </div>
    </div>
    <div class="web">
      <span>商品描述</span>
    </div>
    <div class="sop"></div>
  </div>
  <footer>
    <div class="mask">
      <a href="./智慧商城首页.html">
        <i class="iconfont icon-shouye"></i>
        <p>首页</p>
      </a>
      <a href="./购物车.html">
        <i class="iconfont icon-gouwuchekong"></i>
        <p>购物车</p>
      </a>
    </div>
    <div class="main">
      <a href="javaScript:;">
        <div class="min">加入购物车</div>
      </a>
      <a href="javaScript:;">
        <div class="max">立即购买</div>
      </a>
    </div>
  </footer>
</body>
<script src="js/swiper.js"></script>
<script src="./axios.js"></script>
<script src="./js/commit.js"></script>
<script>
  setTimeout(function () {
    new Swiper(".swiper", {
      speed: 200,
      direction: "horizontal",
      loop: true,
      loopAdditionalSlides: 4,
      autoplay: {
        // autoplay: true,
        // stopOnLastSlide: true,
        disableOnInteraction: false,
        delay: 1500,
        pauseOnMouseEnter: true,
      },
      pagination: {
        el: ".swiper-pagination",
      },
      // centeredSlides: true,
      // observer: true, //修改swiper自己或子元素时，自动初始化swiper
      // observeParents: true, //修改swiper的父元素时，自动初始化swiper
    })
  }, 1000)

  let name = location.search;
  name=name.slice(name.indexOf("=")+1)
  console.log(name);
  document.querySelector('.back').addEventListener('click',function () {
    history.go(-1)
  })
  let src = ''
  const goodsId = name
  const limit = 2
  const res = axios.get(`/goods/detail&goodsId=${goodsId}`).then(res => {
    // console.log(res)
    src = res.data.data.detail
    console.log(src)
    document.querySelector('.lpm').innerHTML = src.skuList[0].goods_price
    document.querySelector('.lo').innerHTML = src.line_price_min === '0.00' ? null:src.line_price_min
    document.querySelector('.swiper-wrapper').innerHTML = src.goods_images.map(item => {
      // console.log(item.external_url)
      return `
      <div class="swiper-slide">
          <img src="${item.external_url}" width="100%" alt="" />
        </div>
      `
    })
    document.querySelector('.sun').innerHTML = `<span>已售${src.goods_sales}件</span>`
    document.querySelector('.son').innerHTML = `<span>${src.goods_name}</span>`
    document.querySelector('.sop').innerHTML = src.content
  })

  const sec = axios.get(`/comment/listRows&goodsId=${goodsId}&limit=${limit}`).then(res => {
    // console.log(res)
    const data = res.data.data
    console.log(data)
    if(data.list.length === 0){
      return document.querySelector('.zfh').style.display = 'none'
      console.log(111)
    }else{
      document.querySelector('.fei').innerHTML = `<p>商品评价(${data.total}条)</p>`
      document.querySelector('.zzy').innerHTML = data.list.map(item => {
      return `
      <div class="zuo">
          <div class="yan">
            <img src="${item.user.avatar_url ? item.user.avatar_url : '	http://cba.itlike.com/public/mweb/static/default-avatar.png'}" alt="" />
            <span>${item.user.nick_name}</span>
          </div>
          <div class="zo">
            <span>${item.content}</span>
          </div>
          <div class="xl">
            <span>${item.create_time}</span>
          </div>
        </div>
      `
    }).join('')
    }
  })

  const text = axios.get(`/goods.service/list&goodsId=${name}`).then(res=>{
    console.log(res)
  })
  document.querySelector('.hong').addEventListener('click',function () {
    location.href = `./用户评价.html?sum=${name}`
  })
</script>

</html>
